<template>
    <div>
        <!-- 导航 -->
        <div class="header-nav">
            <div class="nav-item">热门</div>
            <div class="nav-item">美妆</div>
            <div class="nav-item">穿搭</div>
        </div>
        <div class="occupy"></div>
        <!-- 直播列表 -->
        <div class="live-list">
            <div class="mona-live-item" v-for="(item,index) in liveList" :key="index">
                <div class="actor-info">
                    <div class="info-img">
                        <img :src="item.info_img" alt="">
                    </div>
                    <div class="info-name">{{item.info_name}}</div>
                </div>
                <div class="main" :style="'background: url('+item.cover_img+') no-repeat 0 0;background-size:100%'">
                    <div class="live-info-mask">
                        <div class="live-info"><span>直播中</span></div>
                        <div class="live-title">{{item.live_title}}</div>
                        <div class="goods-list">
                            <div class="left">
                                <ul>
                                    <li v-for="(item,index) in item.goods_list" :key="index" :style="'background: url('+item.goods_url+') no-repeat 0 0;background-size:100%'"><p>{{item.goods_price | price}}</p></li>
                                </ul>
                            </div>
                            <div class="right">
                                <ul>
                                    <li v-for="(item,index) in item.audience" :key="index">
                                        <img :src="item.audience_url" alt="">
                                        <span>{{item.message}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let live = require('../../static/json/live.json')
export default {
    data() {
        return {
            liveList:[], // 直播列表
            goodsList:[], // 商品列表
        }
    },
    methods:{
        getLivelist(){
            this.liveList = live.liveList
        },
    },
    created(){
        this.getLivelist()
    },
    filters:{
        price:(value)=>{
            return "￥" + value
        }
    }
}
</script>

<style lang="less" >
    // 导航
    @headerHeight: 45px;
    .header-nav{
        position: fixed;
        top: 0px;
        width: 100%;
        height: @headerHeight;
        line-height: @headerHeight;
        background: #fff;
        margin-bottom: 5px;
        display: flex;
        z-index: 999;
        .nav-item{
            flex: 1;
            text-align: center;
            color: #333;
            font-size: 14px;
        }
    }
    .occupy{
        width: 100%;
        height: @headerHeight;
    }
    // 直播列表
    .live-list{
        border-top: 6px solid #f5f5f5;
        .mona-live-item{
            padding: 0px 18px;
            background: #fff;
            .actor-info{
                height: 60px;
                display: flex;
                .info-img{
                    width: 68px;
                    height: 68px;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    overflow: hidden;
                    margin: 0px 12px;
                    position: relative;
                    z-index: 200;
                    margin-top: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .info-name{
                    margin-top: 24px;
                }
            }
            .main{
                width: 606px;
                height: 288px;
                border-radius: 10px;
                position: relative;
                .live-info-mask{
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    // height: 192px;
                    height: 170px;
                    margin: 18px;
                    .live-info{
                        height: 28px;
                        line-height: 28px;
                        padding: 0px 10px;
                        color: #fff;
                        border-radius: 4px;
                        font-size: 14px;
                        background-color: rgba(0,0,0,.26);
                        display: inline-block;
                    }
                    .live-title{
                        color: #fff;
                        font-size: 22px;
                        margin-top: 8px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .goods-list{
                        position: absolute;
                        bottom: 0px;
                        left: 0px;
                        right: 0px;
                        overflow: hidden;
                        .left{
                            float: left;
                            ul{
                                overflow: hidden;
                                li{
                                    float: left;
                                    width: 86px;
                                    height: 86px;
                                    margin-right: 8px;
                                    position: relative;
                                    p{
                                        display: block;
                                        width: 100%;
                                        position: absolute;
                                        bottom: 5px;
                                        text-align: center;
                                        color: #fff;
                                        font-size: 18px;
                                    }
                                }
                            }
                        }
                        .right{
                            float: right;
                            width: 172px;
                            ul{
                                li{
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    img{
                                        width: 20px;
                                        height: 20px;
                                        border-radius: 50%;
                                        vertical-align: middle;
                                    }
                                    span{
                                        font-size: 16px;
                                        color: #fff;
                                        margin-left: 6px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>